import React, { useEffect, useState } from 'react'
import axios from 'axios';
import './index.scss'
export default function Home(props) {
    // 分页接口 一般可以直接掉不需要自己截取
    // 上拉加载组件 用现成的
    const [list, setList] = useState([])
    const [showList, setShowList] = useState([])
    const [pageIndex, setPageIndex] = useState(1); // 当前页
    const [pageSize, setPageSize] = useState(5); // 每页5条
    const [total, setTotal] = useState(0); // 总条数
    useEffect(() => {
        axios.get('/list').then(res => {
            setList(res.data); // 异步
        })
    }, [])
    useEffect(() => {
        console.log(list)
        getListByType(props.match.params.id)
        // 监听list发生改变再去执行函数
    }, [list])
    const getListByType = (type) => {
        const data = list.filter(item => item.type == type);
        setTotal(data.length) // 设置总数
        setPageIndex(1) // 重置到1
        setShowList(data.slice(0, pageSize)) // 设置当前展示的列表
    }
    useEffect(() => {
        getListByType(props.match.params.id)
    }, [props.match.params.id])
    const update = () => {
        console.log("重新加载一页数据，并拼接到原数据")
        const index = pageIndex + 1;
        setPageIndex(index)
        axios.get('/list').then(res => {
            const data = res.data.filter(item => item.type == props.match.params.id); // 获取总数据
            setShowList((prev) => {
                // 截取下一页数据并且拼接
                if (prev.length >= data.length) return prev;
                prev = prev.concat(data.slice((index - 1) * pageSize, index * pageSize))
                return JSON.parse(JSON.stringify(prev))
            })
        })

    }
    return (
        <div className="home">
            <div className="tabs"></div>
            <div className="list">
                <ListLoad update={update}>
                    {showList.map((item, index) => {
                        return <div className="list_box" key={item.id}>
                            <div className="top">
                                <div className="label"></div>
                                <div className="title">{item.title}</div>
                            </div>
                            <div className="content">
                                <div className="left">
                                    {item.content}
                                </div>
                                <div className="right">
                                    <img src={item.image} alt="" />
                                </div>
                            </div>
                            <div className="info">
                                <i className="iconfont icon-dianzan1"></i> {item.like}
                                <i className="iconfont icon-pinglun"></i> {item.look}
                            </div>
                        </div>
                    })}
                </ListLoad>

            </div>
        </div>
    )
}


// 上拉加载组件
function ListLoad(props) {
    useEffect(() => {
        // 监听layout的滚动条位置
        // 滚动条高度
        // 滚动条距离顶部的距离
        // layout的视图高度
        const layout = document.querySelector('.layout');
        window.addEventListener('scroll', () => {
            const scrollTop = document.documentElement.scrollTop;
            const scrollHeight = layout.scrollHeight;
            const offsetHeight = layout.offsetHeight;
            if (scrollTop + offsetHeight == scrollHeight) {
                // 到底了
                props.update()
            }
        })

    }, [])
    return <div className="scroll_box">
        {props.children}
    </div>
}
